<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache">
		<meta http-equiv="Expires" content="0">
		<title>大佬超管理平台</title>
		<link rel="Shortcut Icon" href="../../static/favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" href="../../static/login/css/login.css">
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.min.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/MD5/Base64.js"></script>
		<script type="text/javascript" src="../../static/js/MD5/md5.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
	</head>
	<style>
		#app {
			background-image: url("../../static/login/images/lQLPDhsuvuCoyxLNBDjNB4KwfvWwjjCE2EACHULfBAC2AA_1922_1080.png");
			background-size: 100%;
		}

		body {
			background-color: #042281;
		}

		.loginImg {
			width: 100%;
			margin-left: 0px;
		}

		.login {
			margin-top: 11.5%;
			margin-left: 22%;
			background-color: transparent;
		}

		.loginImg {
			margin-top: 8%;
			margin-left: 47%;
		}

		.fa {
			font-size: x-large;
			line-height: 50px;
		}

		.el-input--prefix .el-input__inner {
			padding-left: 40px;
		}

		.message {
			background-color: transparent;
			opacity: 0.7;
			color: #fff;
			text-align: left;
			margin-left: 5%;
		}

		.input /deep/ input {
			border-radius: 30px;
			width: 100%;
			height: 50px;
			background-color: #718294;
			color: #fff;
		}

		.inputcode /deep/ input {
			border-radius: 30px;
			height: 50px;
			background-color: #718294;
		}

		.s {
			width: 100%;
			height: 100%;
			font-size: 27px;
			color: #037AED;
			text-align: center;
			/* 居中 */
		}
	</style>
	<body>
		<div id="app" style="width: 100%;height: 100%; position:Relative;">
			<div
				style="width: 60%; height: 60%; background-color: red; float: left; position:absolute; top: 20%; left: 20%;">
				<div style="width: 40%; height: 100%; background-color: #1756CB; float: left; position:Relative;">
					<img src="../../static/login/images/lQLPDhsuvuCoyq7NAqDNAkGwVXF8m8cWWPkCHULfEsDBAA_577_672.png"
						style="width: 100%; height: 100%;" />
					<div style="position:absolute; top: 35px; left: 25px; width: 270px; height: 80px;">
						<img src="../../static/img/30.png" style="width: 65%; height: 65%;display: none;">
					</div>
					<div style="position:absolute; top: 20px; left: 25px; width: 270px; height: 30px;">
						<p style="font-family: KaiTi; font-size: 20px; color: white">欢迎登录</p>
					</div>
					<div style="position:absolute; top: 60px; left: 20px; width: 300px; height: 50px;">
						<p style="font-family: KaiTi; font-size: 27px; color: white">{{platform}}</p>
					</div>
					<div style="position:absolute; bottom: 20px; left: 10%;">
						<p style="font-family: KaiTi; font-size: 22px; color: white">角色管理|权限管理|菜单管理</p>
					</div>
				</div>
				<div style="width: 60%; height: 100%; background-color: white; float: left;">
					<div class="login" style="position: absolute; margin: 9.5% 0px 0px 16%;">
						<div class="message">
							<div class="s">{{platform}}</div>
						</div>
						<el-form :model="formData" :rules="formRules" ref="formData" v-show="loginFlag===false"
							style="padding: 0px 0px; margin-left: 20px;">
							<el-form-item prop="usercode">
								<el-input class="input" type="text" placeholder="请输入用户名" prefix-icon="fa fa-user"
									v-model="formData.usercode">
								</el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input class="input" type="password" placeholder="请输入密码"
									prefix-icon="fa fa-unlock-alt" v-model="formData.password" show-password></el-input>
							</el-form-item>
							<el-form-item prop="captcha">
								<el-input class="inputcode" type="text" placeholder="请输入验证码" prefix-icon="fa fa-qrcode"
									v-model="formData.captcha" style="width: 70%;position:relative;"></el-input>
								<img alt="验证码" id="captcha" name="captcha" class="code" @click="getValidateCode()"
									titie="点击刷新" style="margin-left:5%;width: 25%;height:48px;position: absolute;">
							</el-form-item>
							<el-form-item style="margin-top: 0px;margin-bottom: 10px;">
								<el-button :loading="submitLoading" type="primary" @click="login('formData')"
									style="width: 100%; background-color: #037AED;" :disabled="disabled">登录
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			let main = {
				data() {
					return {
						flag: 1,
						disabled: false,
						loginFlag: false,
						checked: true,
						showDrawer: false,
						drawerTitle: '忘记密码',
						isChanged: 0,
						errorNum: 0,
						yrOptions: [],
						setCodeOptions: [],
						formData: {
							usercode: '',
							password: '',
							captcha: '',
							sessionId: '',
							companyAbbreviation: "",
							copyright: ""
							// copyright : "为了您的使用体验，请使用谷歌浏览器或360浏览器急速模式   Copyright © 2020 昆明沃创科技有限公司"
						},
						formRules: {
							usercode: [{
								required: true,
								message: '请输入用户名',
								trigger: ['blur', 'change']
							}],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: ['blur', 'change']
								},
								{
									min: 6,
									max: 12,
									message: '长度在6到12个字符'
								}
							],
							captcha: [{
								required: true,
								message: '请输入验证码',
								trigger: ['blur', 'change']
							}]
						},
						fiData: {
							yr: '',
							setCode: '',
							setName: ''
						},
						fiRules: {
							yr: [{
								required: true,
								message: '请选择会计年度',
								trigger: ['blur', 'change']
							}],
							setCode: [{
								required: true,
								message: '请选择账套',
								trigger: ['blur', 'change']
							}]
						},
						forgetData: {
							usercode: '',
							idcard: '',
							phone: ''
						},
						forgetRules: {
							usercode: [{
								required: true,
								message: '请输入工号',
								trigger: ['blur', 'change']
							}],
							idcard: [{
									required: true,
									message: '请输入身份证号'
								},
								{
									min: 18,
									max: 18,
									message: '请输入18位身份证号'
								}
							],
							phone: [{
									required: true,
									message: '请输入手机号'
								},
								{
									pattern: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
									message: '手机号格式不对',
									trigger: ['blur', 'change']
								},
								{
									min: 1,
									max: 32,
									message: '长度在1到32个字符'
								}
							],
							password: [{
									required: true,
									message: '请输入密码',
									trigger: ['blur', 'change']
								},
								{
									min: 6,
									max: 12,
									message: '长度在6到12个字符'
								}
							]
						},
						submitLoading: false,
						platform:'大佬超管理平台',
						type:1
					}
				},
				created() {
					//this.getYrOptions();
					this.type = URLUtils.getParam('type');
					if(this.type && this.type==1){
						this.platform='大佬超管理平台'
						
					}
					else if(this.type && this.type==2){
						this.platform = '管理平台2'
					}
					document.title = this.platform;
					this.getValidateCode();
					this.checked = getCookie('checked') == "true" ? true : false;
				},
				mounted() {
					if (this.checked && getCookie('usercode')) {
						this.formData.usercode = getCookie('usercode');
					}
					//绑定回车按钮的登录事件
					window.addEventListener('keydown', this.keyDown);
				},
				watch: {
					forgetData: {
						deep: true,
						handler: function(newVal, oldVal) {
							this.isChanged = 1;
						}
					}
				},
				methods: {
					keyDown(e) {
						//如果是回车则执行登录方法
						if (e.keyCode == 13) {
							this.login('formData');
						}
					},
				 
					setChange(value) {
						let obj = {};
						obj = this.setCodeOptions.find((item) => {
							return item.value === value;
						});
						this.fiData.setName = obj.label;
					},
					 
					forget() {
						this.forgetData = {
							usercode: this.formData.usercode,
							idcard: '',
							phone: '',
							password: ''
						};
						this.showDrawer = true;
					},
					forgetPwd(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								let that = this
								that.disabled = true;
								let signParms = {
									usercode: this.forgetData.usercode,
									idcard: this.forgetData.idcard,
									phone: this.forgetData.phone,
									password: Base64.encode(hex_md5(this.forgetData.password).toUpperCase(
										data)),
								};
								WebApi('/user/forgetPwd', 'post', signParms, function() {
									if (data.code == 200) {
										that.disabled = false;
										that.showDrawer = false;
										that.formData.password = this.forgetData.password;
										that.$message({
											showClose: true,
											message: data.msg,
											type: 'success',
											duration: 3000
										});
										that.getValidateCode();
									} else {
										if (that.errorNum <= 2) {
											that.disabled = false;
											that.errorNum += 1;
										} else {
											that.disabled = false;
											that.showDrawer = false;
											that.errorNum = 0;
										}
										that.$message({
											showClose: true,
											message: data.msg,
											type: 'error',
											duration: 10000
										});
									}
								}, function(xhr, type, errorThrown) {})
							} else {
								return false;
							}
						});
					},
					handleClose() {
						if (this.isChanged == 0) {
							this.showDrawer = false;
						} else {
							this.showDrawer = false;
						}
					},
					login(formName) {
						let that = this
						that.$refs[formName].validate((valid) => {
							if (valid) {
								that.disabled = true;
								let timestamp = Date.parse(new Date());
								let signParms = {
									sessionID: that.formData.sessionId,
									usercode: Base64.encode(that.formData.usercode),
									password: Base64.encode(hex_md5(that.formData.password)
										.toUpperCase()),
									captcha: that.formData.captcha
								};
								that.submitLoading = true;
								webApi('/user/login', 'post', signParms, function(data) {
									that.submitLoading = false;
									if (data.code == 200) {
										setCookie("token", data.data);
										setCookie("checked", that.checked);
										if (that.checked) {
											setCookie("usercode", that.formData.usercode);
										}
										that.disabled = false;
										//兼容低代码，设置存储d
										var tokenStr = {
											value: data.data,
											expire: 7 * 24 * 60 * 60 * 1000
										};
										localStorage.setItem("pro__Access-Token", JSON.stringify(
											tokenStr));
										//登录成功选择会计年度和授权的账套
										window.top.location = encodeURI("sys-index.html?v=" + Math
											.random()+'&type='+that.type);
									 
									} else {

										that.disabled = false;
										that.getValidateCode();
										that.$message({
											showClose: true,
											message: data.msg,
											type: 'error',
											duration: 10000
										});
									}
								}, function(xhr, type, errorThrown) {
									that.submitLoading = false;
								})
							} else {
								return false;
							}
						});
					},
				 
					getValidateCode() {
						let that = this
						let params = {
							timestamp: (new Date()).valueOf()
						};
						console.log(params)
						webApi('/user/getValidateCode', 'get', params, function(data) {
							$('#captcha').attr('src', data.data.img);
							that.formData.sessionId = data.data.sessionId;
						}, function(xhr, type, errorThrown) {})
					}
				}
			};
			let app = Vue.extend(main);
			new app().$mount('#app');
		}
	</script>

</html>